<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿select</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <div id="app">
        <h2>全局注册</h2>
        <custom-select></custom-select>
        <h2>局部注册</h2>
        <custom-select1></custom-select1>
    </div>
    <script src="../../2.1.8/vue.js"></script>
    <script>

        /*
            组件的意义，重用 html 代码段
            组件注册，分为全局注册和局部注册
            Vue.component(name,object)
                (1) name : 组件名，可以是烤串，也可以是驼峰，在使用组建时，要使用烤串的形式
                (2) object : template，props，methods，等属性，操作组件
            全局注册 在任何 vue 实例都可以使用
            局部注册 指定的 vue 实例中 使用
        */


        Vue.component('custom-select',{
            template : 
            `<section class="warp">
                <div class="searchIpt clearFix">
                    <div class="clearFix">
                        <input type="text" class="keyWord" value="" />
                        <input type="button" value="GO">
                        <span></span>
                    </div>
                    <ul class="list">
                        <li>html+css</li>
                        <li>html5+css3</li>
                        <li>javascript</li>
                        <li>angular</li>
                        <li>react</li>
                        <li>vue</li>
                        <li>jquery</li>
                        <li>nodejs</li>
                    </ul>
                </div>
            </section>`
        });
        let vm = new Vue({
            el : '#app',
            components : {
                'custom-select1' : {
                    template : 
                    `<section class="warp">
                        <div class="searchIpt clearFix">
                            <div class="clearFix">
                                <input type="text" class="keyWord" value="" />
                                <input type="button" value="GO">
                                <span></span>
                            </div>
                            <ul class="list">
                                <li>html+css</li>
                                <li>html5+css3</li>
                                <li>javascript</li>
                                <li>angular</li>
                                <li>react</li>
                                <li>vue</li>
                                <li>jquery</li>
                                <li>nodejs</li>
                            </ul>
                        </div>
                    </section>`
                }
            }
        });
    </script>
</body>
</html>